<template>
	<div class="card-3">
		<div class="title">
			<div class="lbox">{{ item.name }} - 报告</div>
			<div class="rbox">
				<el-button @click="clickBtns({ flag: '上传报告', item })">
					<img src="@img/shangchuan.png" alt="" />
					<span>上传报告</span>
				</el-button>
			</div>
		</div>
		<ul class="list">
			<li class="item" @click="clickItem(sub)" v-for="(sub, i) in item.pdf_urls" :key="i">
				<div class="icon">
					<img src="@img/Pdf.png" alt="" />
				</div>
				<div class="text" :title="getFileName(sub)">{{ getFileName(sub) }}</div>
			</li>
		</ul>
		<pageUploaderPop ref="pageUploaderPop"></pageUploaderPop>
		<pagePopView ref="pagePopView"></pagePopView>
	</div>
</template>

<script>
import pageUploaderPop from '@/components/common/pageUploaderPop';
import pagePopView from '@/components/common/pagePopView';
export default {
	props: {
		item: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	name: 'fileName',
	components: { pageUploaderPop,pagePopView },
	data() {
		return {};
	},
	computed: {},
	created() {},
	mounted() {
		// this.init();
	},
	methods: {
		clickItem(sub) {
			if (sub) {
				// window.open(sub);
				this.$refs.pagePopView.init({url:sub});
			}
		},
	
		init() {
			this.$parent.getReportInfo();

			// this.$api('check/device_report/info',
			// 	{},
			// 	'post'
			// ).then((res) => {
			// 	this.sub_load = false;
			// 	if (res.code == 200) {
			// 		alertSucc('提交成功')
			// 		this.handleClose();
			// 	}
			// });
		},
		clickBtns({ flag, item }) {
			if (flag == '上传报告') {
				this.$refs.pageUploaderPop.init({ ...item });
				return;
			}
		}
	}
};
</script>

<style scoped lang="less">
.card-3 {
	flex-shrink: 0;
	width: 314px;
	height: 172px;
	padding: 25px;
	background: #ffffff;
	border-radius: 10px;
	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 18px;
		font-weight: bold;
		font-size: 18px;
		color: #333333;
		line-height: 25px;
		text-align: left;
		font-style: normal;
		.lbox {
		}
		.rbox {
			position: relative;
			left: 10px;
			button {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 84px;
				height: 30px;
				background: #fc5f10;
				border-radius: 4px;

				font-weight: bold;
				font-size: 12px;
				color: #ffffff;
				font-style: normal;

				img {
					width: 10px;
					height: 12px;
					// line-height: 17px;
					display: inline-block;
					margin-right: 5px;
					vertical-align: middle;
				}
			}
		}
	}
	.list {
		.item {
			display: flex;
			align-items: center;
			margin-bottom: 10px;
			cursor: pointer;
			.icon {
				flex-shrink: 0;
				width: 12px;
				height: 13px;
				margin-right: 10px;
				img {
					width: 100%;
					height: 100%;
					object-fit: contain;
				}
			}
			.text {
				font-weight: 500;
				font-size: 14px;
				color: #333333;
				line-height: 20px;
				text-align: left;
				font-style: normal;
				.line-1();
			}
		}
	}
}
</style>
